

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->

<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- BEGIN HEAD -->

<head>

	<meta charset="utf-8" />

	<title></title>


</head>

<!-- END HEAD -->

<!-- BEGIN BODY -->

<body class="page-header-fixed">

	<!-- BEGIN CONTAINER -->

	<div class="page-container row-fluid">

		<!-- BEGIN SIDEBAR -->

			<!-- Import Menu -->        
			<jsp:include page="/WEB-INF/adminLayouts/menu.jsp"></jsp:include>

		<!-- END SIDEBAR -->

		<!-- BEGIN PAGE -->

		<div class="page-content">

			<!-- BEGIN PAGE CONTAINER-->        

			<div class="container-fluid">

				<!-- BEGIN PAGE HEADER-->

				<c:if test="${not empty message}">
					<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close"></button>${message}</div>
				</c:if>
				<div class="row-fluid">

					<div class="span12">

						<!-- BEGIN STYLE CUSTOMIZER -->
						<!-- Import Style Setting Button -->        
						<jsp:include page="/WEB-INF/adminLayouts/style-setting.jsp"></jsp:include>
						<!-- END BEGIN STYLE CUSTOMIZER -->  

						<!-- BEGIN PAGE TITLE & BREADCRUMB-->
						<h3 class="page-title">会员绑定会员卡统计</h3>
						<ul class="breadcrumb">
							<li>
								<i class="icon-home"></i>
								<a href="javascript:void(0)">统计</a>
								<i class="icon-angle-right"></i>
							</li>
							<li>会员绑定会员卡统计</li>
						</ul>
						<!-- END PAGE TITLE & BREADCRUMB-->
					</div>
				</div>

				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->

				<div class="row-fluid">
					<div class="">
						<!-- BEGIN BORDERED TABLE PORTLET-->
						<div class="portlet box yellow">
							<div class="portlet-title">
								<div class="caption"><i class="icon-user"></i>会员绑定会员卡统计</div>
								<div class="tools">
									<form action="${ctx}/admin/stat/statForYear" id="inputForm" method="post" class="form-horizontal">
									<input type="hidden" name="cardId" value="" />
									<input type="text" id="year" name="year" value="${year}" placeholder="年" onfocus="WdatePicker({dateFmt:'yyyy'})" class="Wdate" />
									<input type="text" id="year" name="yearMonth" value="${yearMonth}" placeholder="月" onfocus="WdatePicker({dateFmt:'MM'})" class="Wdate" />
									<input type="submit" class="btn green" value=" 查 询 "/>
									</form>
									
								</div>
							</div>

							<div class="portlet-body">

								<div id="main" class="chart" style="height: 600px;"></div>
								
							</div>
						</div>

						<!-- END BORDERED TABLE PORTLET-->
					</div>
				</div>
				<!-- END PAGE CONTENT-->
			</div>
			<!-- END PAGE CONTAINER-->
		</div>
		<!-- END PAGE -->
	</div>
	
	<script type="text/javascript">
	
	function submitFrom(){
		$("#inputForm").submit();
	}
	
	// 图表实例化 echarts Bar图------------------
	// srcipt标签式引入
   	var myChart = echarts.init(document.getElementById('main'));
	
 	// 过渡---------------------
   	myChart.showLoading({
   	    text: '正在努力的读取数据中...',    //loading话术
   	});
 	
	var option = {
   		    title : {
   		        text: '${title}',
   		        subtext: ''
   		    },
   		    tooltip : {
   		        trigger: 'item'
   		    },
   		    legend: {
   		        data:['领卡人数']
   		    },
   		    toolbox: {
   		        show : true,
   		        feature : {
   		            //mark : {show: true},
   		           // dataView : {show: true, readOnly: false},
   		            //magicType : {show: true, type: ['line', 'bar']},
   		            restore : {show: true},
   		            saveAsImage : {show: true}
   		        }
   		    },
   		    calculable : true,
   		    xAxis : [
   		        {
   		            type : 'category',
   		            data : [${xAxisData}]
   		        }
   		    ],
   		    yAxis : [
   		        {
   		            type : 'value'
   		        }
   		    ],
   		    series : [
   		        {
   		            name:'领卡人数',
   		            type:'bar',
   		            data:[${seriesData}],
   		            /* markLine : {
   		                data : [
   		                    {type : 'average', name: '平均值'}
   		                ]
   		            }, */
	   		         itemStyle: {
	   	                normal: {
	   	                    color: function(params) {
	   	                        // build a color map as your need.
	   	                        var colorList = [
	   	                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
	   	                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
	   	                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
	   	                        ];
	   	                        return colorList[params.dataIndex]
	   	                    },
	   	                    label: {
	   	                        show: true,
	   	                        position: 'top',
	   	                        formatter: '{c}'
	   	                    }
	   	                }
	   	            }
   		        }
   		    ]
   		};
	
	// ajax callback
	myChart.hideLoading();
	
	myChart.setOption(option);
	
</script>
</body>
	
</html>
